<template>
  <a-layout-header style="background: #ffffff; padding: 0 50px; box-shadow: 0 1px 4px rgba(0,0,0,0.08);">
    <div style="display: flex; align-items: center; justify-content: space-between;">
      <div style="display: flex; align-items: center;">
        <div style="font-size: 20px; font-weight: 600; color: #2c3e50; margin-right: 50px;">
          🧬 {{ $t('home.title') }}
        </div>
        <a-menu
          v-model:selectedKeys="selectedKeys"
          mode="horizontal"
          :style="{ background: 'transparent', border: 'none' }"
        >
          <a-menu-item key="home">
            <router-link to="/">{{ $t('nav.home') }}</router-link>
          </a-menu-item>
          <a-menu-item key="search">
            <router-link to="/search">{{ $t('nav.search') }}</router-link>
          </a-menu-item>
          <a-sub-menu key="advanced-search" :title="$t('nav.advancedSearch')">
            <a-menu-item key="sequence-search" @click="goToSequenceSearch">
              <span style="display: flex; align-items: center; gap: 8px;">
                <span>🧬</span>
                <span>{{ $t('nav.sequenceSearch') }}</span>
              </span>
            </a-menu-item>
            <a-menu-item key="structure-search" @click="goToStructureSearch">
              <span style="display: flex; align-items: center; gap: 8px;">
                <span>🧪</span>
                <span>{{ $t('nav.structureSearch') }}</span>
              </span>
            </a-menu-item>
          </a-sub-menu>
          <a-menu-item key="arcchat">
            <router-link to="/arcchat">arcCHAT</router-link>
          </a-menu-item>
          <a-menu-item key="upload" v-if="isLoggedIn">
            <router-link to="/upload">{{ $t('nav.upload') }}</router-link>
          </a-menu-item>
          <a-menu-item key="history" v-if="isLoggedIn">
            <router-link to="/history">{{ $t('nav.history') }}</router-link>
          </a-menu-item>
          <a-menu-item key="admin" v-if="isLoggedIn">
            <router-link to="/admin">
              <template #icon><setting-outlined /></template>
              数据库管理
            </router-link>
          </a-menu-item>
        </a-menu>
      </div>
      
      <!-- 语言切换和登录按钮 -->
      <div style="display: flex; align-items: center; gap: 12px;">
        <!-- 语言切换 -->
        <a-dropdown>
          <a-button>
            <template #icon><global-outlined /></template>
            {{ currentLanguage }}
          </a-button>
          <template #overlay>
            <a-menu @click="handleLanguageChange">
              <a-menu-item key="zh">
                <span :style="{ fontWeight: locale === 'zh' ? 'bold' : 'normal' }">
                  🇨🇳 中文
                </span>
              </a-menu-item>
              <a-menu-item key="en">
                <span :style="{ fontWeight: locale === 'en' ? 'bold' : 'normal' }">
                  🇺🇸 English
                </span>
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>

        <!-- 登录/登出按钮 -->
        <a-button v-if="!isLoggedIn" type="primary" @click="goToLogin">
          <template #icon><login-outlined /></template>
          {{ $t('nav.login') }}
        </a-button>
        <a-dropdown v-else>
          <a-button>
            <template #icon><user-outlined /></template>
            {{ $t('nav.admin') }}
            <down-outlined style="margin-left: 4px;" />
          </a-button>
          <template #overlay>
            <a-menu>
              <a-menu-item @click="() => router.push('/admin')">
                <setting-outlined />
                数据库管理
              </a-menu-item>
              <a-menu-divider />
              <a-menu-item @click="handleLogout">
                <logout-outlined />
                {{ $t('nav.logout') }}
              </a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </div>
    </div>
  </a-layout-header>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { LoginOutlined, UserOutlined, LogoutOutlined, DownOutlined, GlobalOutlined, SettingOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import axiosInstance from '../utils/axios'

const router = useRouter()
const route = useRoute()
const { locale, t } = useI18n()
const selectedKeys = ref([route.name?.toLowerCase() || 'home'])

const isLoggedIn = computed(() => {
  const token = localStorage.getItem('admin_token')
  const expires = localStorage.getItem('token_expires')
  return token && expires && Date.now() < parseInt(expires)
})

const currentLanguage = computed(() => {
  return locale.value === 'zh' ? '中文' : 'English'
})

const handleLanguageChange = ({ key }) => {
  locale.value = key
  localStorage.setItem('language', key)
  message.success(key === 'zh' ? '已切换到中文' : 'Switched to English')
}

const goToLogin = () => {
  router.push('/login')
}

const goToSequenceSearch = () => {
  router.push('/sequence-search')
}

const goToStructureSearch = () => {
  router.push('/structure-search')
}

const handleLogout = async () => {
  try {
    // 调用登出接口
    await axiosInstance.post('/auth/logout')
  } catch (error) {
    console.error('登出请求失败:', error)
  } finally {
    // 无论如何都清除本地token
    localStorage.removeItem('admin_token')
    localStorage.removeItem('token_expires')
    message.success(t('nav.logout'))
    router.push('/')
  }
}

onMounted(() => {
  // 根据当前路由更新选中的菜单项
  selectedKeys.value = [route.name?.toLowerCase() || 'home']
})
</script>

<style scoped>
:deep(.ant-menu-item) {
  font-weight: 500;
  color: #606266;
}

:deep(.ant-menu-item-selected) {
  color: #409eff !important;
  font-weight: 600;
}

:deep(.ant-menu-item-selected::after) {
  border-bottom-color: #409eff !important;
}

:deep(.ant-btn-primary) {
  background: #409eff;
  border-color: #409eff;
}
</style>
